<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <el-button type="primary" @click="openDialog">新增</el-button>
            </div>
        </div>
        <CustomTable class="mt-2" :data="tableData" :total="tableTotal" v-model:page-size="pageSize" @pageSize="getList"
            v-model:currentPage="pageNum" @currentPage="getList">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="mobile" label="手机号码	" />
            <el-table-column prop="headUrl" label="头像">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.headUrl" fit="cover" />

                </template>
            </el-table-column>
            <el-table-column prop="roleCode" label="角色" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button @click="approveUser(row)">审核</el-button>
                </template>
            </el-table-column>
        </CustomTable>
    </div>
    <CustomDialog v-model:show="addDialog" title="新增用户" width="600px" @cancel="cancelDialog" @confirm="submitForm">
        <el-form ref="formRef" :model="userForm" label-width="auto">
            <el-form-item label="用户名称" prop="username">
                <el-input v-model="userForm.username"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
                <el-input v-model="userForm.password"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名" prop="name">
                <el-input v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="userForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="用户头像" prop="headUrl">
                <SingleUpload v-model="userForm.headUrl"></SingleUpload>
            </el-form-item>
            <el-form-item label="用户角色" prop="roleCode">
                <el-select v-model="userForm.roleCode">
                    <el-option v-for="item in roleCodeList" :value="item.code" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属社区" prop="tenantId">
                <el-select v-model="userForm.tenantId">
                    <el-option v-for="item in tenantList" :value="item.id" :label="item.tenantName"></el-option>
                </el-select>
            </el-form-item>

        </el-form>
    </CustomDialog>
</template>

<script setup lang="ts">
import CustomTable from '@/components/CustomTable.vue'
import { onMounted, reactive, ref } from 'vue'
import { getUserList, addUser, auditUser } from '@/apis/system'
import { getTenantList } from '@/apis/tenant'
import CustomDialog from '@/components/CustomDialog.vue'
import SingleUpload from '@/components/SingleUpload.vue'
import { ElMessage } from 'element-plus'

const tableData = ref([])
const tableTotal = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)

const getList = async () => {
    const res = await getUserList({
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    console.log(res)
    tableData.value = res.list
    tableTotal.value = res.total
}
const addDialog = ref()
const openDialog = () => {
    addDialog.value = true
}
const cancelDialog = () => {
    addDialog.value = false
}
const submitForm = async () => {
    await addUser(userForm)
    addDialog.value = false
    getList()
}

const userForm = reactive({
    username: '',
    password: '',
    name: '',
    mobile: '',
    headUrl: '',
    roleCode: '',
})
const roleCodeList = ref([{
    code: 'ADMIN',
    name: '管理员'
}, {
    code: 'LEADER',
    name: '团长'
}, {
    code: 'CONSUMER',
    name: '顾客'
}, {
    code: 'FARMER',
    name: '农民'
}])
const tenantList = ref([])
const getTenants = async () => {
    const res = await getTenantList()
    tenantList.value = res
}
onMounted(() => {
    getList()
    getTenants()
})
const approveUser = async (row) => {
    await auditUser(row.id)
    ElMessage.success("审核成功")
}
</script>

<style scoped></style>
